<template>
<!-- 商品评论 -->
  <div>
     <div>
         <van-nav-bar
      title="济南黑马程序员实战项目-ugo"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    </div>
    <div>
        <h4>发表评论</h4>
        <hr>
        <!-- 留言框 -->
       <div class="field">
            <van-field
            rows="1"
            autosize
            v-model="value"
            name="用户名"
            type="textarea"
            placeholder="请输入留言"
            />
           
       </div>
       <div class="btn3">
            <van-button type="info" size="large" @click="post">发表评论 </van-button>
       </div>
      <div class="list" v-for="(item, index) in commentList" :key="item.id">
           <div class="title" >
            <span>第{{index + 1}}楼</span>
            <span>用户: {{item.user_name}}</span>
            <span>发表时间: {{item.add_time | dateFormat}}</span>
        </div>
        <div class="body">{{item.content}}</div>
      </div>
       <div class="btn4">
            <van-button color="#cf162e" plain size="large">加载更多 </van-button>
       </div>
    </div>
    <div class="null">留言不能为空</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        commentList: [],
        value: ''
    };
  },
  created: function() {
      this.getcommentList()
  },
  methods: {
       //返回
      onClickLeft: function() {
        //   self.location = document.referrer
        //返回上一页
        window.history.back(-1);
      },
      getcommentList: async function() {
          const { data: res } = await this.$http.get('/api/getcomments/88?pageindex=1')
          console.log(res);
          this.commentList = res.message
      },
      //评论
      post: async function() {
       
      }
  }
};
</script>

<style scoped>
h4 {
    margin-left: 5px;
}
.field {
    height: 100px;
    margin: 0 5px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;

    padding: 10px 5px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    border: 1px solid #ccc;

}
.btn3 {
    margin: 5px;
}
.btn4 {
    margin: 5px 5px 50px;
}
.list {
    margin: 5px;
}
.title {
    height: 30px;
    background-color: #ccc;
    font-size: 12px;
    line-height: 30px;
}
.title span {
    margin-right: 6px;
}
.body {
    line-height: 35px;
    text-indent: 2em;
    font-size: 12px;
}
.null {
  display: none;
  position: absolute;
  padding-left: 5px;
  left: 38%;
  top: 62%;
  border-radius: 5px;
  height: 30px;
  width: 100px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, .3);
  font-size: 14px;
}
</style>
